<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name="author" content="disenQF" >
        <meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
        <title>HTML5模板-引用js的三种方式</title>
        <!-- 引入外联样式文件 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
            
        </style>
    </head>
    <body>
        <!-- 在标签事件的脚本中，this代表是标签本身的对象
             onchange 表示 input输入的值发生改变时，同时在获取焦点的前提下，按回车即触发 
        -->
       <input id="inputNum" type="text" placeholder="请输入1-10范围的整数" onchange="guest(this.value)">
       <button onclick="guest(inputNum.value)">猜一猜</button>
    
       <div id="ret"></div>
       <script>
           function guest(input_val){
               // console.log(input_val, typeof(input_val)); string
               // 将输入的值 显示在 div标签中 .innerHTML 以html风格显示,  .innerText 以纯文本的方式显示
               // ret.innerText = input_val;

               // 随机产生一个整数
               // Math.random(); // [0, 1) 区间的小数
               let rnd_n = parseInt( Math.random() * 10 + 1 ); // [1, 10] 区间的整数
               // ret.innerHTML = rnd_n;

               let input_n = parseInt(input_val);

               if(rnd_n == input_n){
                  ret.innerHTML = "恭喜您中得100万大奖!";
               }else{
                  ret.innerHTML = "没有猜对哟，再来一次请充值!";
               }
           }
       </script>
    </body>
</html>
